<template>
	<view>
		<xk-header :headerbg="true" :back="true" title="智慧寻车"></xk-header>
		<view style="height: 85vh;padding-top: 220rpx;position: relative;" @click="hasNewValue">
			<image class="top-img" src="https://ibms.on-bright.com:8000/wx/parkingImg.png"></image>
			<view class="card-wrap" @click="hasNewValue">
				<view style="display: flex;align-items: center;">
					<!-- <u-code-input v-model="carCode" maxlength="7" space="5" size="32"></u-code-input> -->
					<xt-verify-code v-model="carCode" inputType="text" size="7"></xt-verify-code>
					<view class="cell" :class="{'border-solid': isNew}" @click.stop="isNew = true">
						<view v-if="!isNew">
							<view>+</view>
							<view>新能源</view>
						</view>
						<view v-else>
							<input style="font-size: 18px;" focus v-model="newValue" maxlength="1"/>
						</view>
					</view>
				</view>
				<u-button type="primary" shape="circle" text="查询爱车" @click="search"></u-button>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				isNew: false,
				newValue: '',
				carCode: '',
			};
		},
		onLoad() {
			this.carCode = '粤'
		},
		watch:{
			carCode(val){
				this.carCode = val.toUpperCase()
			}
		},
		methods:{
			hasNewValue(){
				if(this.newValue) 
					this.isNew = true
				else
					this.isNew = false
			},
			search(){
				if(this.isNew && this.carCode.length < 7 && this.newValue) {
					uni.$u.toast('请填写完整的车牌号')
					return
				}
				else if(!this.isNew && this.carCode.length < 7){
					uni.$u.toast('请填写完整的车牌号')
					return
				}
				const data = {
					car_no: this.carCode+this.newValue
				}
				
				this.$util.post({
					url: 'wx/applet/parking/queryParkingSituationLot',
					data
				}).then(res =>{
					if(res.car_no){
						uni.navigateTo({
							url: 'searchDetail?result='+JSON.stringify(res)
						})
					}
					else this.$u.toast('未查到相关数据')
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
.top-img{
	position: absolute;
	top: 0;
	left: 0;
	height: 320rpx;
	width: 100%;
}
.cell{
	width: 64rpx;
	height: 64rpx;
	border: 2px dashed #c9cacc;
	margin-left: 5px;
	color: #2B940E;
	display: flex;
	justify-content: center;
	align-items: center;
	text-align: center;
	font-size: 16rpx;
	z-index: 2;
}
.border-solid{
	border: 2px solid #c9cacc;
}
.card-wrap{
	position: relative;
	margin: 0 40rpx;
	border-radius: 20rpx;
	background-color: white;
	box-shadow: 0px 2rpx 6rpx 0px rgba(215,215,215,1);
	padding: 48rpx;
	display: flex;
	flex-direction: column;
	gap: 60rpx;
	align-items: center;
}
</style>
